<template>
  <a-modal
    width="45vw"
    v-model:visible="visible"
    :mask-closable="false"
    title="添加对账备注"
    @ok="okFn"
    @cancel="close"
    @close="close"
    unmount-on-close
  >
    <page-form-row :gutter="24">
      <page-form-item label="费用名称" size="1">{{ info.itemName }}</page-form-item>
      <page-form-item label="备注信息" size="1">
        <i-input placeholder="请输入" v-model="form.remark" :maxLength="200" />
      </page-form-item>
    </page-form-row>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="okFn" :loading="okLoading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  const emits = defineEmits(['ok'])
  const visible = ref(false)
  const okLoading = ref(false)
  import { createRemarkShortOrderBill } from '@/api/finance/examine'
  import { Notification } from '@arco-design/web-vue'

  const info = ref({})
  const form = ref({})

  const okFn = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    let fn = createRemarkShortOrderBill
    fn(param)
      .then(() => {
        Notification.success('添加成功')
        close()
        emits('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  const open = (data) => {
    info.value = data
    form.value = {
      id: data.id,
      remark: '',
    }
    visible.value = true
  }

  const close = () => {
    visible.value = false
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .modal-body {
    position: relative;
    width: 100%;
    max-height: 70vh;
  }
</style>
